<template>
 <view class="td_order">
   <!--探店tabs-->
   <view v-if="menuCurrent == 1" ref="tdTabsBbox" class="tabs_box">
     <u-tabs
         :list="tdTabslist"
         :is-scroll="true"
         :current="tdCurrent"
         @change="tdChange"
         font-size="26rpx"
         item-width="20%"
         active-color="#FFA844"
         inactive-color="#999999"
         :active-item-style="{ color: '#303133' }"
         bar-height="10" style="width: 100%"></u-tabs>
   </view>
   <!--官返tabs-->
   <view v-if="menuCurrent == 2" class="tabs_box">
     <u-tabs
         :list="taskTabslist"
         :is-scroll="true"
         :current="taskCurrent"
         @change="taskChange"
         font-size="26rpx"
         item-width="25%"
         active-color="#FFA844"
         inactive-color="#999999"
         :active-item-style="{ color: '#303133' }"
         bar-height="10" style="width: 100%"></u-tabs>
   </view>
   <!--任务tabs-->
   <view v-if="menuCurrent == 3" class="tabs_box">
     <u-tabs
         :list="gfTabslist"
         :is-scroll="true"
         :current="gfCurrent"
         @change="gfChange"
         font-size="26rpx"
         item-width="25%"
         active-color="#FFA844"
         inactive-color="#999999"
         :active-item-style="{ color: '#303133' }"
         bar-height="10" style="width: 100%"></u-tabs>

   </view>
   <view class="order_content">
     <!--填补菜单高度-->
     <view :style="{'height': tdTabsHeight + 'px;width:100%;'}"></view>
     <scroll-view
         scroll-y="true"
         :refresher-enabled="true"
         @refresherrefresh="onrefresherrefresh"
         :refresher-triggered="isTriggered"
         refresher-default-style="none"
         lower-threshold="30"
         @scrolltolower="onScrolltolower"
         @scroll="scrollTo"
         :scroll-top="newScrollTop"
         :scroll-with-animation="true"
         :style="'height:calc(100% - '+tdTabsHeight+'px)'">
       <!--订单提示-->
       <view v-show="menuCurrent == 1" class="order_tip_wrap">
         <view>1、请在营业可用时间到店；购买后需在倒计时内到店核销并上传笔记；驳回后必须在规定时间内修改并上传笔记，超时将自动取消且无法恢复。</view>
         <view>2、探店订单及名片，一般在提交后当天完成审核，订单审核通过后补贴立即到账。</view>
       </view>
       <view v-show="menuCurrent == 3" class="order_tip_wrap">
         <view> 温馨提示：需在规定时间内保存订单号延长上传凭证的时间，超时报名作废，活动失效。 </view>
       </view>

       <view v-if="order_item.check_time == 1" style="height: 100%;width: 100%;position: fixed"
             @click.passive="setMore(order_item)">
       </view>
       <!-- 加载中提示 -->
       <view class="lanjiazai_wrap" v-if="skeletonLoading">
         <view class="lanjiazai_item">
           <view class="loading_icon">
             <image :src="BestImgUrl + '/index/logo_loading.gif'" class="loading_gif"></image>
           </view>
           <view class="tag">加载中...</view>
         </view>
       </view>
       <!--小程序订单列表-->
       <view class="order_list_wrap" v-if="orderList.length != 0 && menuCurrent == 1">
         <TdOrders
             :orderList="orderList"
             :showAsk="showAsk"
             :source="source"
             @Getorders="Getorders"
             @showAskFun="showAskFun"
             @quxiao="quxiao"
             @tuikuan="tuikuan"
             @getTelFun="getTelFun"
         />
         <view class="chudijiazai">
           <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                       margin-bottom="10"/>
           <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
         </view>
       </view>
       <!--官返订单列表-->
       <view class="order_list_wrap" v-if="gfOrderList.length != 0 && menuCurrent == 3">
         <GfOrders ref="gfOrder"
             :gfOrderList="gfOrderList"
             @childGetFun="childGetFun"
         />
         <view class="chudijiazai">
           <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                       margin-bottom="10"/>
           <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
         </view>
       </view>
       <!--任务订单列表-->
       <view class="order_list_wrap" v-if="taskOrderList.length != 0 && menuCurrent == 2">
         <TaskOrders
             :taskOrderList="taskOrderList"
             :source="source"
             @cancelTaskOrderFun="cancelTaskOrderFun"
         />
         <view class="chudijiazai">
           <u-loadmore icon-type="flower" :status="loadingstatus" font-size="24" :load-text="loadText" margin-top="30"
                       margin-bottom="10"/>
           <view v-if="Bottomingrefresh == true" class="Bottomingrefresh" @click="RefreshBtn()">立即刷新</view>
         </view>
       </view>
       <!-- 暂无订单提示 -->
       <view v-else-if="orderList.length == 0 && failTimeOutShow == false && menuCurrent == 1" class="noData_box shop_list_wrap_height">
         <u-empty text="暂无订单" mode="order" font-size="32" icon-size="120"></u-empty>
       </view>
       <view v-else-if="taskOrderList.length == 0 && failTimeOutShow == false && menuCurrent == 2" class="noData_box shop_list_wrap_height">
         <u-empty text="暂无订单" mode="order" font-size="32" icon-size="120"></u-empty>
       </view>
       <view v-else-if="gfOrderList.length == 0 && failTimeOutShow == false && menuCurrent == 3" class="noData_box shop_list_wrap_height">
         <u-empty text="暂无订单" mode="order" font-size="32" icon-size="120"></u-empty>
       </view>
       <!-- 网络错误提示 -->
       <view v-else-if="orderList.length == 0 && failTimeOutShow == true && menuCurrent == 1" class="noData_box shop_list_wrap_height">
         <image src="/static/images/Frame33412.png"></image>
         <view class="timeOut">
           <view>网络好像出问题了~</view>
           <view @click="refurbish()">立即刷新</view>
         </view>
       </view>
       <view v-else-if="taskOrderList.length == 0 && failTimeOutShow == true && menuCurrent == 2" class="noData_box shop_list_wrap_height">
         <image src="/static/images/Frame33412.png"></image>
         <view class="timeOut">
           <view>网络好像出问题了~</view>
           <view @click="refurbish()">立即刷新</view>
         </view>
       </view>
       <view v-else-if="gfOrderList.length == 0 && failTimeOutShow == true && menuCurrent == 3" class="noData_box shop_list_wrap_height">
         <image src="/static/images/Frame33412.png"></image>
         <view class="timeOut">
           <view>网络好像出问题了~</view>
           <view @click="refurbish()">立即刷新</view>
         </view>
       </view>
     </scroll-view>
   </view>



   <!--放弃支付弹窗-->
   <u-popup v-model="cancel_order_popup" mode="center" width="600" border-radius="20">
     <view class="tc_wrap" v-if="orderDetails">
       <view style="height: 10rpx"></view>
       <view style="font-size: 32rpx;font-weight: bold">真的要放弃
         <text style="color: #FF7A00">￥{{ orderDetails.price }}</text>
         的套餐优惠吗？
       </view>
       <view class="u-flex" style="color: #999999;font-size: 24rpx;margin-top: 30rpx;justify-content: center">
         <u-count-down
             v-if="cancel_order_popup"
             :timestamp="findcountdown(orderDetails)"
             :show-days="true"
             :show-border="true"
             font-size="20"
             color="#FF4E0D"
             bgColor="#fff"
             border-color="#ffffff"
             separator="zh"
             separator-size="20"
             separator-color="#FF4E0D">
         </u-count-down>
         后自动取消订单
       </view>
       <view
           style="background-color: #f2f2f2;font-size: 24rpx;color: #3d3d3d;border-radius: 10rpx;padding: 20rpx;margin-top: 30rpx;display: flex">
         <image :src="orderDetails.package.images[0]" mode="aspectFill"
                style="width: 120rpx;height: 120rpx;border-radius: 10rpx"></image>
         <view style="text-align: start">
           <view style="font-size: 28rpx;color: #666666;margin-left: 20rpx;font-weight: bold;width: 100%">
             {{ orderDetails.shop.name }}
           </view>
           <view style="font-size: 24rpx;color: #AAAAAA;margin-left: 20rpx;margin-top: 20rpx;width: 100%">
             {{ orderDetails.package_name }}
           </view>
         </view>
       </view>
       <view class="tc_images" style="margin: 20rpx 0;">
         <image :src="imgurlBwc+'/order/cancel@2x.png'" mode="aspectFill"
                style="top: 0;right: 0;position: absolute"></image>
         <view style="position: relative;text-align: center;padding-top: 30rpx;color: white;font-size: 24rpx">
           <view>￥{{ orderDetails.rebate_amount }}</view>
           <view>返利</view>
         </view>
         <view style="display: flex">
           <view style="color: #FF9746;margin-top: -6rpx;font-size: 22rpx">
             原价￥{{ orderDetails.price }}
           </view>
           <view style="flex: 1"></view>
           <view style="color: #FF9746;margin-top: -6rpx;font-size: 22rpx">
             原价￥{{ orderDetails.price }}
           </view>
         </view>
         <view style="color: #FF6600;margin-top: 56rpx;font-size: 22rpx">
           探店价￥
           <text style="font-size: 39rpx">{{ orderDetails.price }}</text>
         </view>
       </view>
       <view class="tc_btn_box">
         <view class="lijipay1">
           <u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="cancel(orderDetails)">
             残忍取消
           </u-button>
         </view>
         <view class="lijipay">
           <u-button hover-class="none" type="info" shape="circle" :ripple="false"
                     @click="ToDetails(orderDetails)">支付锁定优惠
           </u-button>
         </view>

       </view>
     </view>
   </u-popup>
   <!--收集取消支付原因-->
   <u-popup v-model="isPayment" mode="bottom" :closeable="true" height="65%" border-radius="20">
     <view class="cancel-payment">
       <view class="cancel-payment-top">
         <view class="cancel-payment-title">取消支付原因</view>
         <u-line color="#F3F3F3" hair-line></u-line>
         <view class="cancel-payment-head">请选择取消订单原因</view>
       </view>
       <scroll-view scroll-y="true" class="cancel-payment-content">
         <u-radio-group>
           <u-radio
               @change="CancelPaymentChange"
               v-for="(item, index) in infoList" :key="index"
               :name="item.title"
               :disabled="item.disabled"
               :label-size="28"
               :icon-size="35"
               active-color="#FF7A00"
           >
             {{item.title}}
           </u-radio>
         </u-radio-group>
       </scroll-view>
       <view class="cancel-payment-bottom">
         <view class="cancel-payment-btn" @click="cancelPayment()">确认</view>
       </view>
       <!--底部tabbar高度-->
       <view class="tabber_height" :style="{height: tabberHeight+20 + 'px'}"></view>
     </view>
   </u-popup>
   <!--退款弹窗-->
   <u-popup v-model="cancel_refund_popup" mode="center" width="600" border-radius="20">
     <view class="tc_wrap" v-if="orderDetails">
       <view style="height: 10rpx"></view>
       <view style="font-size: 32rpx;font-weight: bold">确定要退款
         <text style="color: #FF7A00">￥{{ orderDetails.price }}</text>
         吗？
       </view>
       <view class="u-flex" style="color: #999999;font-size: 24rpx;margin-top: 30rpx;justify-content: center">
         <u-count-down
             v-if="cancel_refund_popup"
             :timestamp="refundcountdown(orderDetails)"
             :show-days="true"
             :show-border="true"
             font-size="20"
             color="#FF4E0D"
             bgColor="#fff"
             border-color="#ffffff"
             separator="zh"
             separator-size="20"
             separator-color="#FF4E0D">
         </u-count-down>
         后自动取消订单
       </view>
       <view
           style="background-color: #f2f2f2;font-size: 24rpx;color: #3d3d3d;border-radius: 10rpx;padding: 20rpx;margin-top: 30rpx;display: flex">
         <image :src="orderDetails.package.images[0]" mode="aspectFill"
                style="width: 120rpx;height: 120rpx;border-radius: 10rpx"></image>
         <view style="text-align: start">
           <view style="font-size: 28rpx;color: #666666;margin-left: 20rpx;font-weight: bold;width: 100%">
             {{ orderDetails.shop.name }}
           </view>
           <view style="font-size: 24rpx;color: #AAAAAA;margin-left: 20rpx;margin-top: 20rpx;width: 100%">
             {{ orderDetails.package_name }}
           </view>
         </view>
       </view>
       <!--<view class="tc_images" style="margin: 20rpx 0;">
         <image :src="imgurlBwc+'/order/cancel@2x.png'" mode="aspectFill"
                style="top: 0;right: 0;position: absolute"></image>
         <view style="position: relative;text-align: center;padding-top: 30rpx;color: white;font-size: 24rpx">
           <view>￥{{ order_item.rebate_amount }}</view>
           <view>返利</view>
         </view>
         <view style="display: flex">
           <view style="color: #FF9746;margin-top: -6rpx;font-size: 22rpx">
             原价￥{{ order_item.price }}
           </view>
           <view style="flex: 1"></view>
           <view style="color: #FF9746;margin-top: -6rpx;font-size: 22rpx">
             原价￥{{ order_item.price }}
           </view>
         </view>
         <view style="color: #FF6600;margin-top: 56rpx;font-size: 22rpx">
           探店价￥
           <text style="font-size: 39rpx">{{ order_item.price }}</text>
         </view>
       </view>-->
       <view class="tc_btn_box">
         <view class="lijipay1">
           <u-button hover-class="none" type="info" shape="circle" :ripple="false" @click="cancel_refund_popup = false">
             取消
           </u-button>
         </view>
         <view class="lijipay">
           <u-button hover-class="none" type="info" shape="circle" :ripple="false"
                     @click="ToRefund(orderDetails)">确认退款
           </u-button>
         </view>

       </view>
     </view>
   </u-popup>
   <!--收集退款原因-->
   <u-popup v-model="isRefund" mode="bottom" :closeable="true" height="65%" border-radius="20">
     <view class="cancel-payment">
       <view class="cancel-payment-top">
         <view class="cancel-payment-title">取消退款原因</view>
         <u-line color="#F3F3F3" hair-line></u-line>
         <view class="cancel-payment-head">请选择取消订单原因</view>
       </view>
       <scroll-view scroll-y="true" class="cancel-payment-content">
         <u-radio-group>
           <u-radio
               @change="CancelPaymentChange"
               v-for="(item, index) in infoList" :key="index"
               :name="item.title"
               :disabled="item.disabled"
               :label-size="28"
               :icon-size="35"
               active-color="#FF7A00"
           >
             {{item.title}}
           </u-radio>
         </u-radio-group>
       </scroll-view>
       <view class="cancel-payment-bottom">
         <view class="cancel-payment-btn" @click="cancelRefund()">确认</view>
       </view>
       <!--底部tabbar高度-->
       <view class="tabber_height" :style="{height: tabberHeight+20 + 'px'}"></view>
     </view>
   </u-popup>
   <!--笔记要求弹窗-->
   <u-popup v-model="showAsk" mode="bottom" width="750" border-radius="20" :closeable="true"
            :mask-close-able="false">
     <view style="padding: 30rpx;background: white" v-if="order_item">
       <view class="guanyu_title">笔记要求</view>

       <view style="height: 20rpx"></view>
       <u-line></u-line>
       <view style="height: 20rpx"></view>
       <view style="text-align: start">
         <view style="font-size: 28rpx;margin-top: 10rpx;font-weight: bold">
           在到店体验完成后，按照以下要求发布
           <text v-if="order_item.is_multi_platform == 1">{{order_item.note_platforms.length}}</text>
           篇笔记即可获得
           <text style="color:#FF7800;">{{ order_item.rebate_amount }}</text>
           元现金~
         </view>
         <view
             style="font-size: 26rpx;margin-top: 20rpx;color: #FF7800;background-color: #FFF8E8;padding: 20rpx;border-radius: 20rpx">
           Tips:图片是重点!可参考领食惠探店实拍和探友晒图哦~
         </view>
         <view style="font-size: 26rpx;margin-top: 20rpx;;font-weight: bold;display: flex">
           <view>笔记平台:</view>
           <view v-if="order_item.is_multi_platform == 1" v-for="(item,index) in order_item.note_platforms" :key="index">
             {{item.title}}
             <text v-if="index != order_item.note_platforms.length - 1" style="padding: 0">+</text>
           </view>
           <view v-if="order_item.is_multi_platform == 0">{{order_item.platform_type.title}}</view>
         </view>
         <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">笔记图片</view>
         <view style="font-size: 24rpx;margin-top: 10rpx;color: #666666"> {{ order_item.activity_ask }}</view>
         <view @click="copy_hot(order_item.package.subject)" style="font-size: 26rpx;margin-top: 20rpx;display: flex;justify-content: space-between;">
           <view>
             <view style="font-weight: bold">携带话题</view>
             <view style="height: 10rpx"></view>
             <text v-for="(subItem,idx) in order_item.package.subject" :key="idx" style="color: #FF7800">{{ subItem.name }}</text>
             <text style="height: 10rpx;color: #666666">+2个热门自选话题</text>
           </view>
           <view>
             <text style="color: #AAAAAA">轻点复制</text>
             <image :src="imgurlBwc+'/order/copy@2x.png'" style="margin-left: 10rpx;width: 32rpx;height: 32rpx;"></image>
           </view>
         </view>
         <view style="font-size: 26rpx;margin-top: 20rpx;font-weight: bold">添加门店定位</view>
         <view style="height: 10rpx"></view>
         <view @click="Daohang(order_item)" style="color: #FF7800;font-size: 26rpx;">{{order_item.shop.address}}</view>
       </view>

       <view style="height: 60rpx"></view>
       <view style="width: 690rpx;height: 80rpx;background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
              font-size: 32rpx;color: #FFFFFF;line-height: 80rpx;text-align: center;border-radius: 60rpx"
             @click="showAsk=false">
         确定
       </view>
       <!--底部tabbar高度-->
       <view class="tabber_height" :style="{height: tabberHeight+10 + 'px'}"></view>
     </view>
   </u-popup>
   <!--电话弹窗-->
   <u-popup v-model="isTel" mode="bottom" border-radius="20" :closeable="true">
     <view class="tel_popup">
       <view class="tel_title">订单电话</view>
       <u-line hair-line color="#F3F3F3"></u-line>
       <view class="tel_box">
         <view v-if="TelData.PlatformPhone" class="tel_item">
           <view class="tel_text">平台电话：</view>
           <view @click="PlatformPhoneFun(TelData.PlatformPhone)" class="tel_val">{{ TelData.PlatformPhone }}</view>
         </view>
         <view v-else  @click="openService" class="tel_item">
           <view class="tel_text">没有平台电话，请点击客服</view>
           <image :src="`https://td.lszbg.com/public/uploads/h5/home/kefu.png`" mode="widthFix" style="height:33rpx;width:33rpx"></image>
         </view>
         <u-line hair-line color="#F3F3F3"></u-line>
         <view class="tel_item">
           <view class="tel_text">商家电话：</view>
           <view @click="shopsPhoneFun(TelData.shopsPhone)" class="tel_val">{{ TelData.shopsPhone }}</view>
         </view>
       </view>
       <u-line hair-line color="#F3F3F3"></u-line>
       <!--底部tabbar高度-->
       <view class="tabber_height" :style="{height: tabberHeight+20 + 'px'}"></view>
     </view>
   </u-popup>
 </view>
</template>

<script>
import TdOrders from "./td-orders.vue";
import GfOrders from "./gf-orders.vue";
import TaskOrders from "./task-orders.vue";
const app = getApp();
export default {
  name: "TD-Order",
  components: {
    TdOrders, GfOrders, TaskOrders
  },
  props: {
    menuCurrent: {
      type: Number,
      default: ''
    },
    tdsCurrent: {
      type: Number,
      default: ''
    },
    typs: {
      type: String,
      default: ''
    },
    source: {
      type: String,
      default: ''
    },
    pageSource: {
      type: Number,
      default: ''
    },
    tabberHeight: {
      type: Number,
      default: ''
    },
  },
  data() {
    return {
      BestImgUrl: app.globalData.imgurl,
      imgurlBwc: app.globalData.imgurlBwc,
      cancel_order_popup: false, // 取消订单弹窗是否显示
      isPayment: false, // 取消支付原因是否显示
      cancel_refund_popup: false, // 取消退款弹窗是否显示
      isRefund: false, // 取消退款原因是否显示
      showAsk: false, // 笔记要求弹窗是否显示
      //取消支付原因列表
      infoList: [
        {
          id: 1,
          title: '计划有变没时间探店'
        },
        {
          id: 2,
          title: '商家/店员告知无法使用'
        },
        {
          id: 3,
          title: '后悔了，不想要'
        },
        {
          id: 4,
          title: '不会/不想写探店笔记'
        },
        {
          id: 5,
          title: '其他平台/店里活动更优惠'
        },
        {
          id: 6,
          title: '没看清使用规则，要用时发现限制很多'
        },
        {
          id: 7,
          title: '误以为是外卖'
        },
        {
          id: 8,
          title: '预约不上/排队太久'
        },
        {
          id: 9,
          title: '朋友/网上评价不好'
        },
        {
          id: 10,
          title: '商家停业/装修/转让'
        }
      ],
      order_item: {
        package: {
          images: []
        },
        shop: {
          name: ''
        },
        package_name: ''
      },
      typeList: [
        {
          name: '探店订单',
          id: 0
        }, {
          name: '捡漏订单',
          id: 1
        }, {
          name: '砍价订单',
          id: 1
        }
      ],
      typeIdx: 0,
      //all全部 0进行中 1待付款 2已完成 3已结束
      // 探店tabs菜单
      tdTabslist: [
        {
          name: '全部',
          id: 0
        },
        {  // 进行中包括 待使用2、待上传3、待审核4、 已驳回-2
          name: '进行中',
          id: 10
        },
        {
          name: '待付款',
          id: 1
        },
        { // 已结束包括 已退款-3、已取消-1
          name: '已结束',
          id: 11
        },
        {
          name: '已完成',
          id: 5
        }
      ],
      tdCurrent: 0,
      tdTabsHeight: 0,//探店菜单高度
      orderList: [], // 探店订单列表
      types: 'all',//all全部 0进行中 1待付款 2已完成 3已结束
      // 官返tabs菜单
      gfTabslist: [
        {
          name: '全部',
          id: 1
        },
        {
          name: '进行中',
          id: 2
        },
        {
          name: '已完成',
          id: 3
        },
        {
          name: '已取消',
          id: 4
        },
      ],
      gfCurrent: 0,
      gfTabsHeight: 0,//官返菜单高度
      gfOrderList: [], // 官返订单列表
      gfType: 1, //官返订单状态 1全部 2进行中 3已完成 4已取消
      // 任务tabs菜单
      taskTabslist: [
          {
            name: '全部',
            id: 0
          },
          {
            name: '进行中',
            id: 1
          },
          {
            name: '已取消',
            id: 2
          },
          {
            name: '已完成',
            id: 3
          },

      ],
      taskCurrent: 0,
      taskTabsHeight: 0,//任务菜单高度
      taskOrderList: [], // 任务订单列表
      taskStatus: 0, //任务订单状态 0、全部 1、进行中 2、已取消 3、已完成
      pageSize: 10, //每页数量
      currentPage: this.pageSource, //当前页码
      // 平台数据
      platformData: [
        {
          platformType: 1,
          title: '小红书',
          image: '/note/xhs@2x.png',
          fileList: [],
        },
        {
          platformType: 2,
          title: '抖音',
          image: '/note/dy@2x.png',
          fileList: [],
        },
        {
          platformType: 3,
          title: '大众点评',
          image: '/note/dzdp@2x.png',
          fileList: [],
        },
        {
          platformType: 4,
          title: '美团',
          image: '/note/mt@2x.png',
          fileList: [],
        },
      ],
      isTriggered: false, //  是否触发下拉刷新
      skeletonLoading: true, //加载中图片
      Bottomingrefresh: false,
      loadingstatus: 'loading',
      loadText: {
        loadmore: '轻轻上拉',
        loading: '加载中...',
        nomore: '没有更多了'
      },
      failTimeOutShow: false,
      zanwuloc: true,
      cancelPaymentVal: '', //选中的取消支付原因
      order_id: '',//订单id
      orderDetails: {},//订单详情
      oldTdScrollTop: 0,//滚动距离旧值
      newScrollTop: 0, // 滚动距离
      isTel: false,// 是否显示电话弹窗
      TelData: '', // 电话弹窗数据
    }
  },
  mounted() {
    let that = this;
    console.log('订单路径类型==', that.source)
    that.$nextTick(() => {
      const query = uni.createSelectorQuery().in(this);
      query.select('.tabs_box').boundingClientRect(data => {
        if (data) {
          that.tdTabsHeight = data.height
          console.log('子元素高度:', data.height);
        }
      }).exec();
    })
    // 页面加载完成，探店分类菜单默认索引
    that.tdCurrent = that.tdsCurrent
    console.log('分类菜单默认索引:', that.tdsCurrent)
    // 页面加载完成，探店数据默认状态
    that.types = that.typs
    console.log('探店数据默认状态:', that.types)
    // 判断页面返回页码是否改变
    /* if (that.pageSource) {
      console.log('页面返回页码是否改变:', that.pageSource)
      that.currentPage = that.pageSource
    } */
    // 页面加载完成执行探店数据获取
    that.Getorders()

  },
  watch: {
    // 顶部菜单切换
    menuCurrent(newVal, oldVal){
      let that = this
      if (newVal == 1){
        console.log('菜单切换了', that.menuCurrent)
        that.orderList = []
        that.currentPage = 1
        that.Getorders()
      } else if (newVal == 2) {
        console.log('菜单切换了', that.menuCurrent)
        that.taskOrderList = []
        that.currentPage = 1
        that.GetTaskOrders()
      } else if (newVal == 3) {
        console.log('菜单切换了', that.menuCurrent)
        that.gfOrderList = []
        that.currentPage = 1
        that.GetGfOrders()

      }
    },

  },
  methods: {
    // 下拉刷新
    onrefresherrefresh(){
      let that = this
      that.skeletonLoading = true
      that.currentPage = 1
      // 开启 下拉刷新
      that.isTriggered = true
      // 下拉刷新清空数据
      if (that.menuCurrent == 1){
        that.orderList = []
      } else if (that.menuCurrent == 2){
        that.taskOrderList = []
      } else if (that.menuCurrent == 3) {
        that.gfOrderList = []
      }

      setTimeout(function () {
        if (that.menuCurrent == 1){
          that.Getorders()
        } else if (that.menuCurrent == 2) {
          that.GetTaskOrders()
        } else if (that.menuCurrent == 3) {
          that.GetGfOrders()
        }
        uni.stopPullDownRefresh();
        // 关闭 下拉刷新
        that.isTriggered = false
      }, 1500);
    },
    //触底加载
    onScrolltolower() {
      let that = this
      that.loadText.nomore = '没有更多了'
      that.Bottomingrefresh = false
      that.loadingstatus = 'loading';
      if (that.zanwuloc == true) {
        setTimeout(function () {
          console.log('已滚动到底部');
          that.currentPage++
          that.pageSize = 10
          if (that.menuCurrent == 1){
            that.Getorders()
          } else if (that.menuCurrent == 2) {
            that.GetTaskOrders()
          } else if (that.menuCurrent == 3) {
            that.GetGfOrders()
          }
          uni.hideNavigationBarLoading()
        }, 500);
      } else {
        setTimeout(function () {
          uni.hideNavigationBarLoading()
        }, 500);
      }
    },

    scrollTo(e){
      // console.log('滚动距离==', e)
      if (e) {
        this.oldTdScrollTop = e.detail.scrollTop
      }
    },
    // 滚动到顶部
    goTop() {
      this.newScrollTop = 0.1
      this.$nextTick(() => {
        this.newScrollTop = 0
      })
    },
    // 获取订单列表事件
    Getorders(data) {
      let that = this
      // 组件事件刷新页面，页码重置第一页
      if (data){
        that.currentPage = data
      }

      that.$api.GetTanDianOrder({
        page: that.currentPage,
        limit: that.pageSize,
        status: that.types
      }).then(res => {
        // console.log('订单列表', res.data.result)
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        // 处理平台数据
        res.data.result.forEach((item, index) => {
          if(item.is_multi_platform == 1){
            const noteArr = []
            const note = JSON.parse(item.note_platforms)
            note.forEach((item2, index2) => {
              that.platformData.forEach((item3, index3) => {
                if (item3.platformType == item2) {
                  noteArr.push({
                    platformType: item3.platformType,
                    title: item3.title,
                    image: that.imgurlBwc + item3.image,
                    fileList: [],
                  })
                }
              })
            })
            item.note_platforms = noteArr
          } else {
            that.platformData.forEach((item3, index3) => {
              if (item3.platformType == item.platform_type) {
                item.platform_type = {
                  platformType: item3.platformType,
                  title: item3.title,
                  image: that.imgurlBwc + item3.image,
                  fileList: [],
                }
              }
            })
          }
        })
        if (that.currentPage != 1) {
          if (res.data.result.length != 0) {
            that.loadingstatus = 'loading';
            that.orderList = that.orderList.concat(res.data.result)
            if (that.orderList.length > 0) {
              that.order_item = that.orderList[0]
              that.orderList.forEach(function (item) {
                item.more = 0
              })
            }
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.orderList = res.data.result
          that.loadingstatus = 'nomore'
          if (that.orderList.length > 0) {
            that.order_item = that.orderList[0]
            that.orderList.forEach(function (item) {
              item.more = 0
            })

          }
        }
        console.log('订单列表==', that.orderList)
        //使用规则动态赋值
        that.orderList.forEach((item) => {
          //console.log('week', item.package.week)
          //把数组字符串转换为数组数字
          let weekArr = item.package.week.map(item => parseInt(item))
          //改变数据类型
          const weekData = weekArr.map(num => ({
            1: {title: '一', num: '1'},
            2: {title: '二', num: '2'},
            3: {title: '三', num: '3'},
            4: {title: '四', num: '4'},
            5: {title: '五', num: '5'},
            6: {title: '六', num: '6'},
            7: {title: '日', num: '7'}}[num]));
          let weekMax = ''
          let weekMin = ''
          //判断是否连续
          if(this.isArrayContinuous(weekArr)){
            weekData.forEach((itemWeek) => {
              if (itemWeek.num == Math.max(...weekArr)) {
                weekMax = "星期"+itemWeek.title
              } else if(itemWeek.num == Math.min(...weekArr)) {
                weekMin = "星期"+itemWeek.title
              }
            });
            item.weekStuta = weekMin + "到" + weekMax
            //console.log('是连续数字',that.weekList)
          }else{
            item.weekStuta = ''
            weekData.forEach((itemWeek) => {
              item.weekStuta += "星期"+itemWeek.title+","
            })
            item.weekStuta = item.weekStuta.replace('undefined','')
            //console.log('不是连续数字')
          }
        })
        that.skeletonLoading = false
      }).catch(err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          //console.log('请求错误或请求超时', err.errMsg)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '网络好像出问题了~'
            that.Bottomingrefresh = true
          } else {
            that.shopsLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },
    //计算数组是否连续
    isArrayContinuous(arr) {
      const min = Math.min(...arr);
      const max = Math.max(...arr);
      const expectedLength = max - min + 1; // 计算理论上应有的长度
      const seen = new Set(arr); // 使用Set来记录已经出现的数字

      // 检查是否所有数字都出现过
      for (let i = min; i <= max; i++) {
        if (!seen.has(i)) {
          return false;
        }
      }
      return true;
    },
    // 官返订单列表事件
    GetGfOrders(data){
      let that = this
      if ( data){
        that.currentPage = data
      }
      that.$api.GetMtOrderListAPI({
        page: that.currentPage,
        limit: that.pageSize,
        status: that.gfType
      }).then(res => {
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        // console.log('官返订单列表数据=', res.data.result.list)
        if (that.currentPage != 1) {
          if (res.data.result.list.length != 0) {
            that.loadingstatus = 'loading';
            that.gfOrderList = that.gfOrderList.concat(res.data.result.list)
            if (that.gfOrderList.length > 0) {
              that.order_item = that.gfOrderList[0]
              that.gfOrderList.forEach(function (item) {
                item.more = 0
              })
            }
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.gfOrderList = res.data.result.list
          that.loadingstatus = 'nomore'
          if (that.gfOrderList.length > 0) {
            that.order_item = that.gfOrderList[0]
            that.gfOrderList.forEach(function (item) {
              item.more = 0
            })

          }
        }
        // 关闭 下拉刷新 加载中...
        that.skeletonLoading = false
        console.log('官返订单列表数据=', that.gfOrderList)
      }).catch(err => {

      })
    },

    // 任务订单列表事件
    GetTaskOrders(){
      let that = this
      that.$reward.getTaskOrderListAPI({
        page: that.currentPage,
        limit: that.pageSize,
        status: that.taskStatus
      }).then(res => {
        that.loadText.nomore = '没有更多了'
        that.Bottomingrefresh = false
        // 处理平台数据
        res.data.result.forEach((item, index) => {
          item.apply_condition = JSON.parse(item.apply_condition)
          if(item.note_platforms.length > 0){
            const noteArr = []
            const note = JSON.parse(item.note_platforms)
            note.forEach((item2, index2) => {
              that.platformData.forEach((item3, index3) => {
                if (item3.platformType == item2) {
                  noteArr.push({
                    platformType: item3.platformType,
                    title: item3.title,
                    image: that.imgurlBwc + item3.image,
                    apply_condition: item.apply_condition,
                    fileList: [],
                  })
                }
              })
            })
            item.note_platforms = noteArr
          }
        })
        console.log('列表数据===', res.data.result)
        if (that.currentPage != 1) {
          if (res.data.result.length != 0) {
            that.loadingstatus = 'loading';
            that.taskOrderList = that.taskOrderList.concat(res.data.result)
          } else {
            that.loadingstatus = 'nomore'
          }
        } else {
          that.taskOrderList = res.data.result
          that.loadingstatus = 'nomore'
        }
        that.skeletonLoading = false
      }).catch(err => {
        if (!err.data) {
          //不存在就是访问超时或者接口错误
          //console.log('请求错误或请求超时', err.errMsg)
          that.skeletonLoading = false
          if (that.loadingstatus == 'loading') {
            that.loadingstatus = 'nomore'
            that.loadText.nomore = '网络好像出问题了~'
            that.Bottomingrefresh = true
          } else {
            that.shopsLists = []
            that.loadingstatus = 'loading'
            that.loadText.nomore = '没有更多了'
            that.Bottomingrefresh = false
            that.failTimeOutShow = true
          }
        } else {
          uni.showToast({
            title: err.data.msg,
            icon: 'none',
            duration: 2000
          });
        }
      })
    },

    // 官返子组件返回的函数
    childGetFun(res){
      // 组件事件刷新页面，页码重置第一页
      if (res){
        console.log('官返订单列表页码', res)
        this.GetGfOrders(res)
      }
      uni.navigateBack()
      // 重置第一页后滚动到顶部
      this.goTop()
    },
    setMore(item) {
      if (this.order_item.id !== item.id) {
        console.log("11111111111111111111111", item)
        this.order_item.check_time = 2
        item.check_time = 1
      } else {
        if (item.check_time == 1) {
          item.check_time = 2
        } else {
          item.check_time = 1
        }
        console.log("222222222222222222222", item)
      }
      this.order_item = item
      console.log("setMore1", item)
      // this.orderList[index].more =  !this.orderList[index].more
      // this.orderList.push()
      // item.more = !item.more
      // console.log("setMore",item)
    },
    toUploadNote(res) {
      uni.navigateTo({
        url: '/sub_account/pages/upload_note?data=' + encodeURIComponent(JSON.stringify(res)) +  '&source=' + this.source
      })
    },
    // 获取订单详情
    getOrderDetails(id) {
      this.$api.GetbwcorderDetails({
        order_id: id
      }).then(res => {
        console.log('订单详情', res.data.result)
        this.orderDetails = res.data.result
      }).catch(err => {
        uni.showToast( {
          title: err.data.msg,
          icon: 'none',
        })
      })
    },

    // 探店tabs切换事件
    tdChange(item) {
      let that = this
      console.log('item', item)
      that.tdCurrent = item.index;
      that.types = that.tdTabslist[item.index].id
      that.orderList = []
      that.currentPage = 1
      that.Getorders()
    },
    // 官返tabs切换事件
    gfChange(item) {
      console.log('item', item)
      this.gfCurrent = item.index;
      this.gfType = this.gfTabslist[item.index].id
      this.gfOrderList = []
      this.currentPage = 1
      this.GetGfOrders()
    },
    // 任务tabs切换事件
    taskChange(item) {
      console.log('item', item)
      this.taskCurrent = item.index;
      this.taskStatus = this.taskTabslist[item.index].id
      this.taskOrderList = []
      this.currentPage = 1
      this.GetTaskOrders()
    },
    // 确认笔记要求详情弹窗显示
    showAskFun(data){
      this.showAsk = true
      this.order_item = data
      this.showAskData = data
      console.log('data', data)
    },
    // 复制笔记要求弹窗-热门话题
    copy_hot(order_hot) {
      let hotText = ''
      order_hot.forEach(item => {
        hotText += item.name
      })
      console.log('热门话题=', hotText)
      uni.setClipboardData({
        data: hotText, // e是你要保存的内容
        success: function () {
          uni.showToast({
            title: '话题-复制成功',
            icon: 'none'
          })
        }
      });
    },
    // 订单电话事件
    getTelFun(res){
      let that = this
      console.log('电话=', res)
      that.isTel = true;
      that.TelData = res
    },
    // 平台电话事件
    PlatformPhoneFun(tel){
      uni.makePhoneCall({
        phoneNumber: tel,
        success: function () {
          console.log('拨打电话成功');
        },
        fail: function () {
          console.log('拨打电话失败');
        }
      })
    },
    // 打开客服
    openService(){
      // #ifdef MP
      const data = uni.getStorageSync('customerServiceData')
      //console.log('跳转到客服', data);
      wx.openCustomerServiceChat({
        //企业微信的企业id
        corpId:  data.app.corpId,
        extInfo: {
          //客服链接
          url: data.app.url
        },
        success(res) {
          //console.log('跳转成功', res)
        },
        fail(res) {
          //console.log('跳转失败', res)
        }
      })
      // #endif
    },
    // 商家电话事件
    shopsPhoneFun(tel){
      uni.showModal({
        title: '礼貌用语，文明探店',
        content: '老板您好！我是在领食惠探店买的套餐来的探店的达人，现在可以过来用吗?',
        confirmText: '打电话',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            uni.makePhoneCall({
              phoneNumber: tel,
              success: function () {
                console.log('拨打电话成功');
              },
              fail: function () {
                console.log('拨打电话失败');
              }
            })
          }
        }
      })
    },
    // 探店取消订单
    quxiao(id) {
      let that = this
      that.cancel_order_popup = true
      that.order_id = id
      that.getOrderDetails(id)
      /* uni.showModal({
        title: '提示',
        content: '是否要取消此订单?',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            //console.log('用户点击确定');
            that.$api.TDquxiaoOrder({
              order_id: data.id
            }).then(resss => {
              that.Getorders()
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      }); */
    },
    // 任务取消订单
    cancelTaskOrderFun(id){
      let that = this
      uni.showModal({
        title: '取消任务报名',
        content: '确定要取消任务报名订单吗？',
        cancelColor: '#999',
        confirmColor: '#FF7900',
        success: res => {
          if (res.confirm) {
            that.$reward.getCancelSignUpTaskAPI({
              enroll_id: id
            }).then(rees => {
              uni.showToast({
                title: '取消成功',
                icon: 'none',
                duration: 2000
              })
              setTimeout(() => {
                that.GetTaskOrders()
              }, 1500)
            })
          }
        }
      })
    },
    tuikuan(id){
      let that = this
      that.cancel_refund_popup = true
      that.order_id = id
      that.getOrderDetails(id)
    },
    cancel(data) {
      let that = this
      that.cancel_order_popup = false
      that.isPayment = true
      //console.log('用户点击确定')
    },
    //取消支付选中radio
    CancelPaymentChange(e){
      this.cancelPaymentVal = e
    },
    //确认取消支付原因选项
    cancelPayment(){
      let that = this
      // 取消原因为空
      if (that.cancelPaymentVal == ''){
        uni.showToast({
          title: '请选择取消原因',
          icon: 'none',
          duration: 2000
        });
        return
      } else {
        //关闭取消支付原因弹窗
        that.isPayment = false
      }
      // 调用取消订单接口
      this.$api.TDquxiaoOrder({
        cancel_cause: this.cancelPaymentVal,
        order_id: that.order_id
      }).then(res => {
        // console.log('取消原因==', res.data.result)
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          that.Getorders()
          that.isPayment = false
        }, 1000)
      }).catch(err => {
        // console.log('取消订单==', err)
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          this.Getorders()
          this.isPayment = false
        },  1000)
      })
    },
    // 继续支付
    ToDetails(item) {
      this.cancel_order_popup = false
      uni.navigateTo({
        url: '/subpackageA/pages/OrderDetails/OrderDetails?data=' + encodeURIComponent(JSON.stringify(item))
      })
    },
    //确认退款原因选项
    cancelRefund(){
      let that = this
      // 取消原因为空
      if (that.cancelPaymentVal == ''){
        uni.showToast({
          title: '请选择取消原因',
          icon: 'none',
          duration: 2000
        });
        return
      } else {
        //关闭取消支付原因弹窗
        that.isRefund = false
      }
      // 调用取消订单接口
      this.$api.TDtuikuanOrder({
        cancel_cause: this.cancelPaymentVal,
        order_id: that.order_id
      }).then(res => {
        // console.log('取消原因==', res.data.result)
        uni.showToast({
          title: res.data.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          that.Getorders()
          that.isPayment = false
        }, 1000)
      }).catch(err => {
        // console.log('取消订单==', err)
        uni.showToast({
          title: err.data.msg,
          icon: 'none',
          duration: 2000
        });
        setTimeout(() => {
          this.Getorders()
          this.isPayment = false
        },  1000)
      })
    },
    // 订单退款
    ToRefund(){
      let that = this
      that.cancel_refund_popup = false
      that.isRefund = true
    },
    //取消支付倒计时计算
    findcountdown(item) {
      const now = new Date().getTime();
      let createTime = new Date(item.create_time).getTime() + 30*60*1000
      // console.log('结束时间', now, createTime)
      let isend = createTime - now > 0 ? (createTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      return seconds
    },
    // 退款倒计时计算
    refundcountdown(item) {
      const now = new Date().getTime();
      let invalidTime = new Date(item.invalid_date).getTime()
      let isend = invalidTime - now > 0 ? (invalidTime - now) : 0;
      let seconds = this.$moment(isend).unix();
      // console.log('结束时间', seconds)
      return seconds
    },
    // 倒计时结束后执行
    countDownEndFun(){
      uni.reLaunch({
        url: '/pages/orders/orders_gf'
      })
      console.log('倒计时结束')
    },
    // 导航定位
    Daohang(data) {
      wx.openLocation({
        latitude: Number(data.shop.latitude),
        longitude: Number(data.shop.longitude),
        scale: 18,
        name: data.shop.name,
        address: data.shop.address
      });
    },
    heyanmoni(data) {
      let that = this
      uni.showModal({
        title: '提示',
        content: '确定模拟核验订单?',
        confirmColor: '#FF4910',
        success: function (res) {
          if (res.confirm) {
            //console.log('用户点击确定');
            that.$api.TDheyanmoniOrder({
              order_id: data.id
            }).then(resss => {
              that.currentPage = 1
              that.Getorders()
            }).catch(err => {
              uni.showToast({
                title: err.data.msg,
                icon: 'none',
                duration: 2000
              });
            })
          } else if (res.cancel) {
            //console.log('用户点击取消');
          }
        }
      });
    },
    contactService() {
      let data = uni.getStorageSync('customerServiceData')
      // #ifdef H5
      window.location.href = data.h5.url
      // #endif

      // #ifdef APP-PLUS
      let appurl = data.app.url
      uni.navigateTo({
        url: '/pages/Webview/Webview?url=' + encodeURIComponent(JSON.stringify(appurl))
      })
      // #endif
    },



  }
}
</script>

<style scoped lang="scss">
.td_order{
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  .tabs_box{
    height: 100rpx;
    padding: 5rpx 0;
    display: flex;
    position: fixed;
    left: 0;
    right: 0;
    background: #FFFFFF;
    box-shadow: 0 0 20rpx rgba(0, 0, 0, 0.05);
    z-index: 10;
  }
  .order_content{
    flex: 1;
    height: 0;
    overflow-y: auto;
    /*订单提示css*/
    .order_tip_wrap{
      padding: 20rpx 30rpx;
      background: #FFF9F3;
      font-size: 24rpx;
      color: #FF7900;
    }

    /* 暂无店铺css */
    .noData_box {
      margin-top: 120rpx;
      padding-bottom: 260rpx;
      text-align: center;
      color: #999;
      .noData_box .noData_box_img {
        width: 240rpx;
        height: 240rpx;
      }
    }
  }
}

.order_list_wrap {
  padding: 20rpx;
  .order_list_item {
    margin-bottom: 30rpx;
    border-radius: 24rpx;
    padding: 24rpx;
    background-color: #ffffff;

    .order_title {
      align-items: center;
      justify-content: space-between;

      .shop_title {
        align-items: center;

        image {
          width: 32rpx;
          height: 32rpx;
          margin-right: 6rpx;
        }

        text {
          color: $zzy-text-color-999999;
          font-size: 24rpx;
          -webkit-line-clamp: 1;
        }
      }

      .status {
        flex: 1;
        text-align: right;
        font-size: 24rpx;
        .color1 {
          color: #FF4E0D;
        }
        .color2 {
          color: #00AA3B;
        }
        .color3 {
          color: #999999;
        }
      }
    }

    .goods_info {
      align-items: flex-start;
      margin-bottom: 20rpx;
      .goods_img {
        width: 180rpx;
        height: 180rpx;
        position: relative;
        .gf_icon{
          width: 70rpx;
          text-align: center;
          padding: 0 6rpx;
          font-size: 24rpx;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 10;
          border-radius: 12rpx 0 10rpx 0;
          background-color: #FECC32;
          color: #333333;
        }
        image {
          width: 180rpx;
          height: 180rpx;
          border-radius: 16rpx;
        }
      }

      .goods_name {
        padding-left: 16rpx;
        flex: 1;
        .shop_type {
          width: 70rpx;
          height:36rpx;
          background-color: #FECC32;
          color: #333333;
          border-radius: 8rpx;
          font-size: 24rpx;
          text-align: center;
          padding: 2rpx 10rpx;
        }

        view:nth-child(1) {
          // font-weight: bold;
          color: $zzy-text-color-333333;
        }

        view:nth-child(2) {
          font-size: 24rpx;
          color: $zzy-text-color-666666;
        }

        view:nth-child(3) {
          align-items: center;
          justify-content: space-between;
          font-size: 24rpx;
          color: $zzy-text-color-666666;
          flex: 1;

          span {
            color: $zzy-text-color-333333;
            font-size: 28rpx;
          }
        }
      }
    }
    // 必看
    .mustSee{
      position: absolute;
      bottom: 30rpx;
      right: -20rpx;
      z-index: 5;
      padding: 5rpx 13rpx;
      color: #FFFFFF;
      font-size: 12rpx;
      border-radius: 16rpx 16rpx 16rpx 0;
      background: linear-gradient(to right, #fc8635 0%, #ec1e2c 100%);
    }
    .bohui_yin {
      border-radius: 16rpx;
      padding: 20rpx;
      background-color: #FCF0ED;
      margin-bottom: 24rpx;
      align-items: flex-start;

      view:nth-child(1) {
        color: #FF4E0D;
      }

      view:nth-child(2) {
        color: $zzy-text-color-666666;
        flex: 1;
      }
    }

    .order_btnzu {
      align-items: center;
      justify-content: space-between;

      .lxkf {
        flex: 1;
        align-items: center;
        color: $zzy-text-color-333333;
        font-size: 24rpx;
      }

      .lxkefu {
        font-size: 24rpx;

        /deep/ button {
          background-color: transparent !important;
          padding: 0 !important;
          margin: 0 !important;
          line-height: 40rpx !important;
          height: 40rpx;
          font-size: 24rpx !important;
          color: #333333 !important;
        }

        /deep/ button::after {
          border: none !important;
        }
      }

      .right_zu {
        .kongxin {
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #d9d9d9;
          color: $zzy-text-color-333333;
          text-align: center;
          font-size: 24rpx;
        }

        .shise {
          background-color: #FF7900;
          border-radius: 200rpx;
          width: 144rpx;
          height: 56rpx;
          line-height: 56rpx;
          border: 1px solid #FF7900;
          color: #ffffff;
          text-align: center;
          font-size: 24rpx;
          margin-left: 20rpx;
        }
      }
    }
  }
}

.tc_wrap {
  background: linear-gradient(179deg, #FFF2EA 0%, #FFE5E4 5%, #fdf8f8 20%, #FFFFFF 50%, rgba(255, 255, 255, 0) 100%);;
  padding: 30rpx;
  text-align: center;

  .guanyu_title {
    font-size: 30rpx;
    font-weight: bold;
    margin-bottom: 10rpx;
  }

  .wenan {
    color: #999;
    margin-bottom: 20rpx;
  }

  .tc_images {
    width: 520rpx;
    height: 236rpx;
    position: relative;

    image {
      width: 520rpx;
      height: 236rpx;
    }
  }

  .steup_info {
    text-align: left;
    margin-top: 30rpx;

    .yqoiu {
      view:nth-child(1) {
        color: #666;
      }
    }

    .yqoiu2 {
      color: #666;

      span {
        color: #FE7B20;
      }
    }
  }

  .tc_info {
    view:nth-child(1) {
      font-weight: bold;
      font-size: 32rpx;
      margin-bottom: 20rpx;
    }

    view:nth-child(2) {
      font-size: 28rpx;
      color: #999;

      span {
        color: #FF4E0D;
      }
    }

    .gif_tu {
      width: 100%;
      height: 528rpx;
      border-radius: 20rpx;
    }
  }

  .tc_btn_box {
    display: flex;
    align-items: center;
    margin-top: 36rpx;
    justify-content: center;

    .tc_btn_huise {
      flex: 1;
      margin-right: 12rpx;
      background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7);
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
      color: #333333;
    }

    .tc_btn_huise_err {
      flex: 1;
      background-image: linear-gradient(to right, #FF4E0D, #FF4E0D) !important;
      color: #fff;
      border-radius: 200rpx;
      padding: 0 0;
      height: 80rpx !important;
      line-height: 80rpx !important;
      text-align: center;
    }

    .lijipay1 {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 20rpx 0 0;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background: linear-gradient(to right, #F7F7F7, 50%, #F7F7F7) !important;
        color: #333;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }

    .lijipay {
      flex: 1;
      position: relative;
      width: 288rpx;
      margin: 0 auto;

      .u-size-default {
        height: 80rpx !important;
        line-height: 80rpx !important;
        background-image: linear-gradient(to right, #F18F2C, #FF7A00) !important;
        color: #fff;
        border: none !important;
      }

      .u-hairline-border:after {
        border: none !important;
      }
    }
  }
}
//  支付取消原因css
.cancel-payment {
  padding: 0 34rpx;
  height: 100%;
  display: flex;
  flex-direction: column;
  .cancel-payment-top {
    height: 160rpx;
    .cancel-payment-title {
      font-size: 32rpx;
      font-weight: bold;
      height: 80rpx;
      line-height: 80rpx;
      text-align: center;
      color: #3D3D3D;
    }
    .cancel-payment-head {
      font-size: 28rpx;
      color: #888888;
      padding: 20rpx 0;
    }
  }
  .cancel-payment-content {
    height: 0;
    flex: 1;
    .u-radio{
      width: 100% !important;
      display: flex;
      justify-content: space-between;
      padding: 16rpx 0;
      .u-radio__icon-wrap {
        margin-right: 50rpx;
      }
      .u-radio__label {
        font-size: 28rpx;
        color: #3D3D3D;
        order: -1;
      }
    }
  }
  .cancel-payment-bottom {
    padding: 20rpx 0;
    .cancel-payment-btn {
      width: 90%;
      line-height: 80rpx;
      margin: 0 auto;
      color: #fff;
      font-size: 32rpx;
      text-align: center;
      background: linear-gradient( 104deg, #FF7800 0%, #FF7A00 100%);
      border-radius: 200rpx 200rpx 200rpx 200rpx;
    }
  }
}
/* 懒加载css */
.lanjiazai_wrap {
  position: relative;
  z-index: 10000;
  height: calc(100vh);
  text-align: center;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  color: #999;
  padding-top: 100rpx;
  .lanjiazai_item {
    text-align: center;
    .loading_icon {
      width: 120rpx;
      height: 120rpx;
    }
    .loading_gif {
      width: 120rpx;
      height: 120rpx;
    }
  }
}
/* 电话弹窗css */
.tel_popup{
  width: 100%;
  .tel_title{
    font-size: 32rpx;
    padding: 30rpx 20rpx;
    text-align: center;
  }
  .tel_box{
    padding: 0 30rpx;

    .tel_item{
      display: flex;
      align-items: center;
      .tel_text{
        font-size: 28rpx;
        color: #333;
        padding: 30rpx;
        text-align: center;
      }
      .tel_val{
        font-size: 28rpx;
        color: #FF7A00;
        padding: 30rpx 30rpx 30rpx 0;
        text-align: center;
      }
    }
  }
}
</style>